<template>
    <div class="page-content">
        <el-form :inline="true" :model="searchform">
            <div class="flex justify-between mb-3">
                <el-space>
                    <el-button :icon="Refresh" @click="getList">刷新</el-button>
                </el-space>
                <el-space>
                    <el-select v-model="searchform.status" placeholder="审核状态" style="width:200px" clearable>
                        <el-option v-for="item in [{label:'已审核',value:1},{label:'未审核',value:0}]" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-button type="primary" @click="getList" :icon="Search">查询</el-button>
                </el-space>
            </div>
        </el-form>
        <div class="table-section grid" style="height:calc(100% - 32px - 50px);margin-bottom:10px;">
            <el-table :data="tableData.list" style="width: 100%;margin-bottom:10px;" border height="100%">
                <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                <el-table-column prop="motionName" label="动作名称" align="center"></el-table-column>
                <el-table-column label="图片/视频" align="center">
                    <template #default="scope">
                        <template v-for="item of scope.row.resources">
                            <el-image v-if="isImg(item)" :src="item" fit="fill" :preview-src-list="[item]" preview-teleported style="width:120px;height:96px; object-fit: cover;margin:0 5px;"></el-image>
                            <video v-if="isVideo(item)" :src="item" controls muted class="thumb" style="width:120px;height:96px; object-fit: contain;margin:0 5px;"></video>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" width="120">
                    <template #default="scope">
                        <el-tag type="warning" v-if="scope.row.status === 0">待审核</el-tag>
                        <el-tag type="success" v-else>审核通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="updatedAt" label="更新时间" align="center" width="200"></el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                        <el-tooltip content="删除" placement="top">
                            <el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row)"/>
                        </el-tooltip>
                        <el-tooltip content="审核" placement="top" v-if="scope.row.status === 0">
                            <el-button type="success" :icon="Promotion" circle plain @click="handleApprove(scope.row)"/>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            :total="tableData.total"
            v-model:current-page="tableData.page"
            v-model:page-size="tableData.size"
            :page-sizes="[10, 50, 100, 200]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        />
    </div>
</template>


<script setup>
import { reactive } from 'vue'
import motionMaterialApi from 'api/model/motion-material.js'
import { Delete, Promotion, Refresh, Search } from '@element-plus/icons-vue'
import { isImg, isVideo } from '@/utils/util.js'

/**
 *  获取素材列表
 */
const searchform = reactive({
    status: ''
})
/**
 * 表格相关字段
 */
const tableData = reactive({
    list: [],
    total: 0,
    page: 1,
    size: 10
})
const getList = async () => {
    const { code, data } = await motionMaterialApi.list.get({
        status: searchform.status,
        page: tableData.page,
        size: tableData.size
    })
    if (code === 200) {
        const { list = [], total } = data
        tableData.list = list
        tableData.total = total
    } else {
        tableData.list = []
        tableData.total = 0
    }
}

getList()

/**
 * 审核处理
 * @param item
 */
const handleApprove = (item) => {
    ElMessageBox.confirm('确定要审核通过吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        approveItem(item)
    }).catch(() => {
        ElMessage.info('已取消审核')
    })
}
const approveItem = async (item) => {
    const { code } = await motionMaterialApi.update.post({
        id: item.id,
        status: 1
    })
    if (code === 200) {
        ElMessage.success('审核成功')
        getList()
    }
}

/**
 * 删除操作
 * @param item
 */
const handleDelete = (item) => {
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        deleteItem(item)
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}

const deleteItem = async (item) => {
    const { code } = await motionMaterialApi.delete.post({
        id: item.id
    })
    if (code === 200) {
        ElMessage.success('删除成功')
        getList()
    }
}

/**
 * 分页的每页数量改变
 * @param data
 */
function handleSizeChange (data) {
    tableData.size = data
    tableData.page = 1
    getList()
}

/**
 * 分页的页码改变
 * @param data
 */
function handlePageChange (data) {
    tableData.page = data
    getList()
}

</script>

<style lang="less">
.page-content {
    width: 100%;
    height: 100%;
}
</style>
